<template>
  <div class="comments-container">
    <div class="header">
      <h1>评价管理</h1>
    </div>

    <div class="content">
      <div class="summary-cards">
        <div class="summary-card">
          <h3>店铺评分</h3>
          <p class="summary-value">{{ avgRating.toFixed(1) }}</p>
          <p class="summary-sub">基于 {{ totalComments }} 条评价</p>
        </div>
      </div>

      <div class="comments-list" v-if="comments.length > 0">
        <div
          v-for="item in comments"
          :key="item.commentTime + item.reviewerId + item.remark"
          class="comment-card"
        >
          <div class="comment-header">
            <span class="reviewer">{{ item.reviewerId }}</span>
            <div class="stars">
              <span
                v-for="n in 5"
                :key="n"
                class="star"
                :class="{ active: n <= (item.starRating || 0) }"
              >
                ★
              </span>
              <span class="score">{{ item.starRating || 0 }} 分</span>
            </div>
          </div>
          <p class="remark">{{ item.remark }}</p>
          <p class="time">{{ item.commentTime }}</p>
        </div>
      </div>
      <div v-else class="empty">
        暂无评价
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BusinessComments',
  data() {
    return {
      comments: [],
      avgRating: 0,
      totalComments: 0,
      loading: false
    }
  },
  mounted() {
    this.loadComments()
  },
  methods: {
    async loadComments() {
      try {
        const businessId = this.$store.state.businessId
        if (!businessId) {
          this.$router.push('/login')
          return
        }

        this.loading = true
        const [ratingRes, commentsRes] = await Promise.all([
          this.$axios.post('/elm/CommentController/getBusinessRating', null, {
            params: { businessId }
          }),
          this.$axios.post('/elm/CommentController/business/showComments', null, {
            params: { businessId }
          })
        ])

        if (ratingRes.data && (ratingRes.data.code === 200 || ratingRes.data.code === '200')) {
          const result = ratingRes.data.result || {}
          this.avgRating = Number(result.avgRating || 0)
          this.totalComments = Number(result.totalComments || 0)
        }

        if (commentsRes.data && (commentsRes.data.code === 200 || commentsRes.data.code === '200')) {
          this.comments = commentsRes.data.result || []
        }
      } catch (e) {
        console.error('加载评价数据失败:', e)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.comments-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.summary-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.summary-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.summary-card h3 {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
}

.summary-value {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #333;
}

.summary-sub {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #999;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-card {
  background: white;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.reviewer {
  font-weight: 600;
  color: #333;
}

.stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.star {
  color: #ccc;
  font-size: 16px;
}

.star.active {
  color: #ffd700;
}

.score {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

.remark {
  margin: 0 0 4px 0;
  color: #555;
  font-size: 14px;
}

.time {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.empty {
  text-align: center;
  color: #999;
  margin-top: 40px;
}
</style>
